{{/* The bottom navbar that appears on mobile in the docs */}}
<div class="fixed inset-x-0 bottom-0 dark:border-gray-700 lg:hidden">
  <div class="bg-gray-100 dark:bg-gray-700">
    <div class="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center">
        <span>
          <a @click="slideover = !slideover" class="flex items-center cursor-pointer">
            <svg x-show="!slideover" xmlns="http://www.w3.org/2000/svg" class="dark:text-gray-300 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>

            <svg x-show="slideover" xmlns="http://www.w3.org/2000/svg" class="dark:text-gray-300 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>

            <span class="ml-2 uppercase text-sm text-gray-600 dark:text-gray-100">
              Sidebar
            </span>
          </a>
        </span>
      </div>
    </div>
  </div>
</div>
